<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>简单图片滑动</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            .img-hd{
                width: 500px;
                height: 330px;
                margin:20px auto;
                overflow: hidden;
                position: relative;
            }
            .img-hd ul li {
                width: 550px;
                height: 330px;
                float: left;
            }
            .img-hd a {
                position: absolute;
                top: 50%;
                left: 0;
                width:50px;
                height: 50px;
                margin-top: -25px;
                background-color: red;
                opacity: 0.1;
                display: none;
            }
            .img-hd a.next{
                left: auto;
                right: 0;
            }
            .img-hd:hover a{
                display: block;
            }


        </style>
        <script src="jquery-1.12.1.min.js"></script>
        <script>
            $(document).ready(function(){
                var $ul = $('.img-hd>ul'),
                    len = $ul.find('li').length,
                    width = $ul.find('li').width(),
                    ulWidth = len * width ;
                $ul.width(ulWidth);
                $('.img-hd>a').on('click',function(){
                    var $this = $(this);    
                    if ($this.hasClass('next')){ //next
                        $ul.animate({marginLeft:-width}, 500);
                    }else{ //prev

                    }
                });
            });

        </script>
    </head>
    <body>
        <div class="img-hd">
            <ul>
                <li><img src="img/21.jpg" alt=""></li>
                <li><img src="img/22.jpg" alt=""></li>
                <li><img src="img/23.jpg" alt=""></li>
                <li><img src="img/24.jpg" alt=""></li>
                <li><img src="img/30.jpg" alt=""></li>

            </ul>
            <a href="javascript:;" class="prev"></a>
            <a href="javascript:;" class="next"></a>

        </div>



    </body>
</html>